<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        label="上传日期"
        width="240"
        prop="upload_time"
        :formatter="formatTime"
        align="center"
      ></el-table-column>
      <el-table-column label="文件信息" width="300" prop="file" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>文件名: {{ scope.row.file }}</p>
            <p>存储路径: {{ scope.row.file_path }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.file }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDow(scope.$index, scope.row)">下载</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getfilelist, deleteById } from "@/api/file";
const baseURL = process.env.VUE_APP_BASE_API;
export default {
  data() {
    return {
      tableData: [
        {
          id: null,
          upload_time: "",
          file: "",
          file_path: ""
        }
      ]
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    // 通过a标签的链接向后端服务发get请求，接收后端的文件流,此处需补充文件地址
    handleDow(index, row) {
      //console.log('http://127.0.0.1:8001/media/upload_file/'+row.file_path);
      let a = document.createElement("a");
      const path = `http://127.0.0.1:8001/media/${row.file_path}`;
      a.href = path;
      a.click();
    },
    formatTime(row, column) {
      var moment = require("moment");
      var date = row[column.property];
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    handleDelete(index, row) {
      console.log("删除", row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteById(row.id).then(response => {
            const resp = response;
            this.fetchList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    fetchList() {
      getfilelist().then(response => {
        this.tableData = response.data;
        //console.log(this.tableData)
      });
    }
  }
};
</script>